<template>
    <a-form ref='formRef' :label-col='{span : 5}' :model='formData'>
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label="公链" name='chainId' :rules="[{required : true, message : '请选择公链'}]">
            <a-select :fieldNames="{label : 'name', value : 'id'}" v-model:value='formData.chainId' :options='chains'></a-select>
        </a-form-item>
        <a-form-item label="token类型" name='type' :rules="[{required : true, message : '请选择类型'}]">
            <a-select :fieldNames="{label : 'name', value : 'code'}" v-model:value='formData.type' :options='tokenTypes'></a-select>
        </a-form-item>
        <a-form-item label="token标准" name='protocol' :rules="[{required : true, message : '请选择标准'}]">
            <a-select :fieldNames="{label : 'name', value : 'code'}" v-model:value='formData.protocol' :options='tokenStandard'></a-select>
        </a-form-item>
        <a-form-item label='名称' name='name' :rules="[{required : true, message : '请填写名称'}]">
            <a-input type='text' v-model:value='formData.name' />
        </a-form-item>
        <a-form-item label='symbol' name='symbol' :rules="[{required : true, message : '请填写symbol'}]">
            <a-input type='text' v-model:value='formData.symbol' />
        </a-form-item>
        <a-form-item v-if="formData.type == TOKEN_TYPE.TOKENS" label='合约地址' name='contractAddress' :rules="[{required : true, message : '请填写合约地址'}]">
            <a-input type='text' v-model:value='formData.contractAddress' />
        </a-form-item>
        <a-form-item label='精度' name='decimals' :rules="[{required : true, message : '请填写精度'}]">
            <a-input type='number' v-model:value.number='formData.decimals' />
        </a-form-item>
        <a-form-item label='位数' name='precision' :rules="[{required : true, message : '请填写位数'}]">
            <a-input type='number' v-model:value.number='formData.precision' />
        </a-form-item>
        <a-form-item label='图标' name='icon'>
            <a-upload list-type='picture-card' :max-count="1" v-model:file-list='coverList' :beforeUpload='beforeUpload' :customRequest='uploadCover' accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml">
                <template v-if='coverList.length == 0'>
                    <PlusOutlined />
                </template>
            </a-upload>
        </a-form-item>
        <a-form-item label='排序' name='sort'>
            <a-input type='number' v-model:value='formData.sort' />
        </a-form-item>
        <a-form-item label='启用' name='enable'>
            <a-switch v-model:checked='formData.enable' checked-children='启用' un-checked-children='禁用'/>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
    import { saveApi, tokenStandardApi, tokenTypeApi, uploadApi } from '@/api/Token';
    import { publicChainOptionsApi } from '@/api/Chain';
    import { PlusOutlined } from '@ant-design/icons-vue';
    import { ref } from 'vue';
import { TOKEN_TYPE } from '@/constant';
import { uploadIconApi } from '@/api/Upload';
import { Modal } from 'ant-design-vue';

    const props = defineProps<{
        row? : any;
    }>()

    const tokenTypes = ref<any[]>([])
    const tokenStandard = ref<any[]>([])
    const chains = ref<any[]>([])

    const coverList = ref<any[]>([])

    const formRef = ref()

    
    const formData = ref<any>({
        id : 0,
        name : '',
        symbol : '',
        type : '',
        protocol : '',
        chainId : '',
        icon : '',
        contractAddress : '',
        decimals : '',
        precision : '',
        sort : 1,
        enable : true

    })

    if(props.row) {
        for(let k in props.row) {
            if(k in formData.value) {
                if(k == 'rpcs') {
                    formData.value[k] = props.row[k].join("\n")
                }else {
                    formData.value[k] = props.row[k]
                }
                
            }
        }
        if(props.row.icon) {
            coverList.value[0] = {
                status : 'done',
                url : import.meta.env.B_NET_STATIC_URL + props.row.icon
            }
        }

    }

    async function submit() {
        let params  = await formRef.value.validate()
        
        if('sort' in params && params.sort === '') {
            params.sort = 1
        }

        return saveApi(params)
    }


    function uploadCover(e) {

        if(e.file.size > 100 * 1024) {
            Modal.error({
                title : '图标不能大于100kb'
            })
            coverList.value = []
            return false
        }

        uploadIconApi(e.file).then(res => {

            if(res.success) {
                coverList.value[0].status = 'done'
                coverList.value[0].url = import.meta.env.B_NET_STATIC_URL + res.data
                formData.value.icon = res.data
            }else {
                coverList.value = []
                Modal.error({
                    title : res.msg
                })
            }

            
        })
    }

    function beforeUpload(file:File, field:FormField) {
        return true
    }


    defineExpose({
        submit
    })


    tokenTypeApi().then(data => {
        tokenTypes.value = data
    })

    tokenStandardApi().then(data => {
        tokenStandard.value = data
    })

    publicChainOptionsApi().then(data => {
        chains.value = data
    })
</script>